<%@ tag display-name="header" body-content="empty"%>

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>

<%@ attribute name="headerCategories" type="java.util.List" required="true" rtexprvalue="true" description="headerCategories"%>
<header class="global header">
    <div class="header-container">
        <div Rclass="logo noindex" id="logo">
            <a href="/"><img alt="StarHub" src="images/common/logo-starhub.png"></a>
        </div>
    </div>
</header>
<div class="main-menu noindex">
   <div class="inner">
      <div class="parsys iparsys toppar">
         <div class="section">
            <div class="new"></div>
         </div>
         <div class="iparys_inherited">
            <div class="parsys iparsys toppar">
               <div class="topnavigation section">
                  <div class="noindex">
                     <nav class="main-nav">
                        <ul>
                        	<c:forEach var="category" items="${headerCategories}">
	                        	<li class="${(category.selected || category.id == 1) ? 'selected' : '' }">
	                        		<a href="${category.href}">${category.name}</a>
	                        		<ul class="horizontal-menu">
	                        			<c:forEach var="childCategory" items="${category.childCategories}">
	                        				<li>
	                        					<a class="${(childCategory.selected || childCategory.id == 5) ? 'selected' : '' }" href="${childCategory.href}">${childCategory.name}</a>
	                        				</li>
	                        			</c:forEach>
	                        		</ul>
	                        	</li>
                        	</c:forEach>

<!--                            <li class="selected"> -->
<!--                               <a href="/personal.html">Personal</a> -->
<!--                               <ul class="horizontal-menu"> -->
<!--                                  <li><a href="/personal/store.html">Store</a></li> -->
<!--                                  <li><a class="selected" href="/personal/mobile.html">Mobile</a></li> -->
<!--                                  <li><a href="/personal/broadband.html">Broadband</a></li> -->
<!--                                  <li><a href="/personal/tv.html">TV</a></li> -->
<!--                                  <li><a href="/personal/voice.html">Voice</a></li> -->
<!--                                  <li><a href="/personal/hubbing.html">Hubbing</a></li> -->
<!--                                  <li><a href="/personal/promotions.html">Promotions</a></li> -->
<!--                                  <li><a href="/personal/rewards.html">Rewards</a></li> -->
<!--                                  <li><a href="/personal/support.html">Support</a></li> -->
<!--                               </ul> -->
<!--                            </li> -->
<!--                            <li> -->
<!--                               <a href="/business.html">Business</a> -->
<!--                               <ul class="horizontal-menu"></ul> -->
<!--                            </li> -->
<!--                            <li> -->
<!--                               <a href="/about-us.html">About Us</a> -->
<!--                               <ul class="horizontal-menu"></ul> -->
<!--                            </li> -->
                        </ul>
                     </nav>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>